<template>
  <el-container>
    <el-header>
      <h2>缓存策略设置</h2>
    </el-header>
    <el-main>
      <el-form :model="form" label-width="200px">
        <!-- 缓存策略 -->
        <el-form-item label="缓存策略">
          <el-select v-model="form.cacheStrategy" placeholder="请选择缓存策略">
            <el-option
              v-for="option in cacheStrategies"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>

        <!-- 内存占用上限 -->
        <el-form-item label="内存占用上限 (MB)">
          <el-input
            v-model.number="form.memoryLimit"
            type="number"
            placeholder="输入256-4096之间的数字"
            min="256"
            max="4096"
          />
        </el-form-item>

        <!-- 多线程加载 -->
        <el-form-item label="多线程加载">
          <el-input
            v-model.number="form.threadCount"
            type="number"
            placeholder="输入1-128之间的数字"
            min="1"
            max="128"
          />
        </el-form-item>

        <!-- 异常处理策略 -->
        <el-form-item label="异常处理策略">
          <el-select
            v-model="form.errorHandling"
            placeholder="请选择异常处理策略"
          >
            <el-option label="加载失败" value="加载失败" />
            <el-option label="数据损坏" value="数据损坏" />
          </el-select>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const form = ref({
      cacheStrategy: "CPU缓存", // 缓存策略
      memoryLimit: 256, // 默认内存占用上限
      threadCount: 1, // 默认多线程加载
      errorHandling: "" // 异常处理策略
    });

    // 缓存策略选项
    const cacheStrategies = [
      { label: "CPU缓存", value: "CPU缓存" },
      { label: "内存缓存", value: "内存缓存" },
      { label: "硬盘缓存", value: "硬盘缓存" }
    ];

    // 保存方法
    const save = () => {
      const { memoryLimit, threadCount } = form.value;

      // 验证内存占用上限的范围
      if (memoryLimit < 256 || memoryLimit > 4096) {
        ElMessage.error("内存占用上限必须在256到4096之间");
        return;
      }

      // 验证多线程加载的范围
      if (threadCount < 1 || threadCount > 128) {
        ElMessage.error("多线程加载必须在1到128之间");
        return;
      }

      ElMessage.success("保存成功！");
      console.log("保存的设置:", form.value);
      // 在这里可以添加实际的保存逻辑，例如 API 请求
    };

    // 取消方法
    const cancel = () => {
      ElMessage.info("取消操作");
      // 取消逻辑，例如重置表单
    };

    return { form, cacheStrategies, save, cancel };
  }
};
</script>

<style scoped>
.el-header {
  padding: 20px;
  text-align: center;
  background-color: #f5f7fa;
}
</style>
